<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div class="row">
      <div
        id="lineChart"
        class="test-wrepper"
        :style="[{ width: '50%' }, { height: 300 + 'px' }]"
      ></div>
      <div
        id="lineChart2"
        class="test-wrepper"
        :style="[{ width: '50%' }, { height: 300 + 'px' }]"
      ></div>
    </div>
    <q-table
      flat
      square
      bordered
      :rows="dataList"
      :columns="columns"
      class="q-mt-md"
      no-data-label="暂无数据"
      no-results-label="过滤器没有发现任何结果"
      row-key="name"
      v-model:pagination="pagination"
      hide-pagination
    >
      <!-- 表格的加载状态 -->
      <template v-slot:loading>
        <q-inner-loading showing color="grey" />
      </template>
      <!-- 无数据提示信息 -->
      <template v-slot:no-data="{ message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <span>{{ message }}</span>
        </div>
      </template>
      <!-- 表格头部 -->
      <template v-slot:header="props">
        <q-tr no-hover :props="props" class="headTr">
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <!-- 表格主体 -->
      <template v-slot:body="props">
        <q-tr no-hover :props="props" class="tableTr" style="color: #666666">
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <span
              v-html="col.value"
              :class="col.name == 'c6' ? 'text-primary' : ''"
            ></span>
          </q-td>
        </q-tr>
      </template>
    </q-table>
    <!-- 分页 -->
    <Pagination
      :pageSizes="['5条/页', '10条/页', '20条/页', '30条/页']"
      @updatePage="updatePage"
      @updateSizes="updateSizes"
      :pagination="pagination"
      @handlerRefresh="handlerRefresh"
    />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Pagination from "src/components/pagination";
import resize from "src/components/mixins/resize.js";

let chart = null,
  chart2;

export default defineComponent({
  mixins: [resize],
  name: "ceshi3",
  components: { Pagination },
  data() {
    return {
      type: "CYD2023135674",
      type2: "中国-北京-海淀 金隅智造工厂",
      type3: "2023-05",
      option: [2019, 2021, 2022, 2023],
      dataList: [
        {
          idNum: 1,
          c1: "M20180034",
          c2: "故障排查",
          c3: "CYD201907051",
          c4: "2016-01-05 00:21:32",
          c5: "王喜贵",
          c6: "接头松动",
          c7: "关闭",
          c8: "2016-01-05 00:21:32",
        },
        {
          idNum: 2,
          c1: "M20180034",
          c2: "故障排查",
          c3: "CYD201907051",
          c4: "2016-01-05 00:21:32",
          c5: "王喜贵",
          c6: "接头松动",
          c7: "关闭",
          c8: "2016-01-05 00:21:32",
        },
        {
          idNum: 3,
          c1: "M20180034",
          c2: "故障排查",
          c3: "CYD201907051",
          c4: "2016-01-05 00:21:32",
          c5: "王喜贵",
          c6: "接头松动",
          c7: "关闭",
          c8: "2016-01-05 00:21:32",
        },
        {
          idNum: 4,
          c1: "M20180034",
          c2: "故障排查",
          c3: "CYD201907051",
          c4: "2016-01-05 00:21:32",
          c5: "王喜贵",
          c6: "接头松动",
          c7: "关闭",
          c8: "2016-01-05 00:21:32",
        },
        {
          idNum: 5,
          c1: "M20180034",
          c2: "故障排查",
          c3: "CYD201907051",
          c4: "2016-01-05 00:21:32",
          c5: "王喜贵",
          c6: "接头松动",
          c7: "关闭",
          c8: "2016-01-05 00:21:32",
        },
      ],
      columns: [
        { name: "idNum", align: "left", label: "序号", field: "idNum" },
        {
          name: "c1",
          align: "left",
          label: "任务编号",
          field: "c1",
        },
        {
          name: "c2",
          align: "left",
          label: "维护任务内容",
          field: "c2",
        },
        {
          name: "c3",
          align: "left",
          label: "所属电站",
          field: "c3",
        },
        {
          name: "c4",
          align: "left",
          label: "指派时间",
          field: "c4",
        },
        {
          name: "c5",
          align: "left",
          label: "负责人",
          field: "c5",
        },
        {
          name: "c6",
          align: "left",
          label: "现场记录",
          field: "c6",
        },
        {
          name: "c7",
          align: "left",
          label: "状态",
          field: "c7",
        },
        {
          name: "c8",
          align: "left",
          label: "完成时间",
          field: "c8",
        },
      ],
      pagination: {
        // 分页
        sortBy: "desc", // 列名
        descending: false, // 是否按照降序排序
        page: 1, // 页码（当前显示第几页的数据）
        rowsPerPage: 10, // 每页多少行
        rowsNumber: 10, // 共多少条
      },
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    // 初始化echarts实例
    initEcharts(chart, chart2) {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      chart = echarts.init(document.getElementById("lineChart"));
      chart.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart.setOption(this.handlerDefaultOption(), true);
      this.chart = chart;
      if (this.chart2) {
        this.chart2.dispose();
        this.chart2 = null;
      }
      chart2 = echarts.init(document.getElementById("lineChart2"));
      chart2.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart2.setOption(this.handlerDefaultOption2(), true);
      this.chart2 = chart2;
    },
    // 处理echarts配置项
    handlerDefaultOption() {
      this.defaultOption = {
        legend: { show: true, top: "10%" },
        title: {
          text: "任务跟踪看板",
          left: "40%",
          textStyle: {
            color: "#333",
            fontSize: 18,
          },
        },
        tooltip: {},
        grid: {
          left: "8%",
          right: "8%",
          containLabel: false,
        },
        xAxis: {
          data: ["常规检查", "清洁", "故障排查"],
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            name: "任务计划",
            type: "bar",
            data: [5123, 2012, 3644],
            itemStyle: {
              normal: {
                color: "#53D42C",
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "12",
                    color: "black",
                  },
                },
              },
            },
          },
          {
            name: "完成任务",
            type: "bar",
            data: [1235, 1012, 5644],
            itemStyle: {
              normal: {
                color: "#E28C00",
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "12",
                    color: "black",
                  },
                },
              },
            },
          },
        ],
      };

      return this.defaultOption;
    },
    handlerDefaultOption2() {
      this.defaultOption = {
        legend: { show: true, top: "10%" },
        title: {
          text: "工作量统计",
          left: "40%",
          textStyle: {
            color: "#333",
            fontSize: 18,
          },
        },
        grid: {
          left: "8%",
          right: "8%",
          containLabel: false,
        },
        tooltip: {},
        xAxis: {
          data: ["王锡圭", "name2", "name3", "name5", "name12", "test"],
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            name: "任务计划",
            type: "bar",
            data: [5123, 2012, 3644, 1023, 120, 2410],
            itemStyle: {
              normal: {
                color: "#53D42C",
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "12",
                    color: "black",
                  },
                },
              },
            },
          },
          {
            name: "完成任务",
            type: "bar",
            data: [1235, 1012, 5644, 2023, 1120, 410],
            itemStyle: {
              normal: {
                color: "#E28C00",
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "12",
                    color: "black",
                  },
                },
              },
            },
          },
        ],
      };

      return this.defaultOption;
    },
    handlerRefresh() {
      this.handleResetSearch();
    },
    // 切换当前页数
    updatePage(val) {
      if (!val) return;
      this.pagination.page = val * 1;
      this.getTable();
    },
    // 切换每页的行数
    updateSizes(val) {
      this.pagination.rowsPerPage = parseFloat(val);
      this.getTable();
    },
    // 表头选择
    handleSelect() {
      this.visibleColumns = [];
      this.columns.forEach((item, index) => {
        if (index < 9) {
          this.visibleColumns.push(item.name);
        }
      });
    },
  },
});
</script>

<style lang="scss" scoped></style>
